<template>
	<view class="uni_box">
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent">
			<Nheader></Nheader>
			<view class="tioneview">
				<image :src="bg?bg:'/static/tiku/tibg.png'" class="tibg" mode=""></image>
			</view>
			<view class="titwoview">
				 <view class="tibiao">融跃学员累计做题</view>
				 <view class="tishu">
					<view class="shuitem" v-for="(item,index) in nums" :key="index">
						<image src="/static/tiku/tiicon.png" class="tiicon" mode=""></image>
						<view class="shuview">
							{{ item }}
						</view>
					</view>
				 </view>
			</view>
			<view class="shaiview">
				<view class="shaiitem" v-for="(item,index) in tilist" :key="index">
					<text class="shaitit">{{item.title}}</text>
					<view class="shailist">
						<!-- sactive -->
						<view class="shais " :style="{
							background:item.color,
							color:i.color
						}" v-for="(i,ind) in item.list" :key="ind" @click="listClick(i)">{{i.title}}</view>
					</view>
				</view>
			</view>

			<view class="tithreeview">
				<view class="lview">
					<image src="/static/newlogo.png" class="newlogo" mode="widthFix"></image>
				</view>
				<view class="tilist">
					<view class="tiitem">
						<image src="/static/tiku/tione.png" class="tioneicon" mode=""></image>
						<view class="tiright">
							<text class="tiname">行业要闻</text>
							<text class="timiao">热点资讯全方位解读</text>
						</view>
					</view>
					<view class="tiitem">
						<image src="/static/tiku/titwo.png" class="tioneicon" mode=""></image>
						<view class="tiright">
							<text class="tiname">报考指南</text>
							<text class="timiao">一站式报考指导</text>
						</view>
					</view>
					<view class="tiitem">
						<image src="/static/tiku/tithree.png" class="tioneicon" mode=""></image>
						<view class="tiright">
							<text class="tiname">在线题库</text>
							<text class="timiao">真题在线免费练</text>
						</view>
					</view>
					<view class="tiitem">
						<image src="/static/tiku/tione.png" class="tioneicon" mode=""></image>
						<view class="tiright">
							<text class="tiname">报名/查分</text>
							<text class="timiao">报名查分抢先一步</text>
						</view>
					</view>
				</view>

				<view class="tibtn">一键下载融跃教育APP</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<Tabbar :current="3"></Tabbar>
</view>
</template>

<script>
export default {
	data() {
		return {
			nums:'00000000',
			bg:"",
			tilist:[]
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {

	},
	async onLoad() {
		this.getinit()
	},
	async onShow() {
	},
	onReachBottom: function () {
	},
	methods: {
		getinit(){
			this.getbg();//背景图
			this.gettilist();//题库列表
			this.getcount();//题数量
		},
		async getbg(){
			let res = await this.$u.api.tigetBanner({
				mark:'h5-tiku'
			});
			this.bg = res[0].image
		},
		async gettilist(){
			let res = await this.$u.api.getTikuList({
				mark:'h5-tiku'
			});
			this.tilist = res
		},
		async getcount(){
			let res = await this.$u.api.getDoTikuCount({
			});
			this.nums = res.toString()
		},
		listClick(i){
			this.toPage(i)
			// this.navrouter("/pages_subject/twoPage/ZhikePage/XueJihua?combo_id="+i.id);
		}
	}
}
</script>

<style lang="scss" scoped>

.newcontent {
	min-height: 100vh;
	padding-bottom: 130rpx;
	background-color: #fff;
	.tioneview{
		.tibg{
			position: relative;
			height: 320rpx;
			width: 100%;
		}
	}
	.titwoview{
		margin: -120rpx 30rpx 48rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 16rpx solid rgba(255, 91, 0, 0.36);
		position: relative;
		height: 240rpx;
		padding: 20rpx 35rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		// background: #FFFFFF;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(255,91,0,0.36);
		// border-radius: 14rpx;
		.tibiao{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			display: block;
			text-align: center;
		}
		.tishu{
			display: flex;
			flex-direction: row;
			margin-top: 37rpx;
			.shuitem{
				position: relative;
				width: 60rpx;
				height: 84rpx;
				margin: 0 8rpx;
				.tiicon{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.shuview{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: DIN;
					font-weight: bold;
					font-size: 56rpx;
					color: #B0680C;
				}
			}
		}
	}

	.shaiview{
		padding: 25rpx 30rpx;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		// z-index: 100;
		.shaiitem{
			margin-bottom: 20rpx;
			.shaitit{
				display: block;
				margin-bottom: 24rpx;
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
			}
			.shailist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.shais{
					width: 31%;
					margin-right: 2%;
					height: 64rpx;
					background: #F8F8F8;
					border-radius: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 25rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #333333;
				}
				.sactive{
					background: #FFF0F0;
					color: #FA4E4E;
				}

			}
		}
		.shaiitem:last-child{
			margin-bottom: 0 !important;
		}
		
		.chongview{
			display: flex;
			flex-direction: row;
			align-items: center;

			.czhi{
				width: 48%;
				height: 80rpx;
				background: #F8F8F8;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #111111;
			}
			.que{
				width: 48%;
				height: 80rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
	.tithreeview{
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		padding: 0 30rpx;
		.lview{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
			.newlogo{
				width: 220rpx;
			}
		}
		.tilist{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.tiitem{
				padding: 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
				border-radius: 10rpx;
				width: 48%;
				margin-right: 1%;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.tioneicon{
					width: 64rpx;
					height: 64rpx;
					margin-right: 20rpx;

				}
				.tiright{
					display: flex;
					flex-direction: column;
					.tiname{
						font-family: PingFangSC;
						font-weight: bold;
						font-size: 24rpx;
						color: #111111;
					}
					.timiao{
						display: inline-block;
						margin-top: 14rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.tiitem:nth-child(even){
				margin-left: auto;
			}
		}
	}
	.tibtn{
		height: 80rpx;
		background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 40rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}
</style>
